<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-col :span="9">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span><i :class="data.icon"></i>{{ data.menuName }}&nbsp;&nbsp;&nbsp;</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => append(data)">
                    添加
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => update(data)" v-if="data.id!=0">
                    &nbsp;&nbsp;&nbsp;编译
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)"  v-if="data.id!=0">
                    &nbsp;&nbsp;&nbsp;删除
                  </el-button>
                </span>
              </span>
          </el-tree>
        </el-col>
        <el-col :span="15">
          <el-card class="box-card grid-content bg-purple-light" v-if="isShow">
            <div slot="header" class="clearfix">
              <span>菜单信息</span>
              <el-button style="float: right; padding: 2px 0" type="text" @click="saveMenu">保存</el-button>
              <el-button style="float: right; padding: 2px 0" type="text" @click="closeMenu">关闭</el-button>
            </div>
            <el-form :model="menuForm" label-width="70px" >
              <el-form-item label="父级菜单">
                <el-input v-model="parentName"  size="small" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="菜单图标">
                <el-input v-model="menuForm.icon"  size="small"></el-input>
              </el-form-item>
              <el-form-item label="菜单名称">
                <el-input v-model="menuForm.menuName"  size="small"></el-input>
              </el-form-item>
              <el-form-item label="菜单类型">
                <el-select v-model="menuForm.menuType" placeholder="请选择" size="small">
                  <el-option label="目录" :value="0"> </el-option>
                  <el-option label="菜单" :value="1"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="跳转路径" v-if="menuForm.menuType==1">
                <el-input v-model="menuForm.url"  size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
    export default {
        name: "Menus",
        data() {
          return {
            data:[
              {
                id: 0,
                icon:'el-icon-setting',
                menuName: '用户管理系统',
                children: []
              }],
            isShow:false,
            menuForm:{},
            parentName:''
        }
      },
      methods:{
        append:function (data) {
          this.isShow=true
          this.parentName=data.menuName
          this.menuForm.parentId=data.id
          if (null == data.children) {
            this.menuForm.orderNum = 0;
          } else {
            this.menuForm.orderNum=data.children.length;
          }

        },
        closeMenu:function () {
          this.isShow=false
          this.parentName=''
          this.menuForm={}
        },
        saveMenu:function () {
          this.$http.post("/menu/save",this.menuForm).then((res)=>{
            //如何提示
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.searchTree();
            } else {
              this.$message.error(res.data.message);
            }
            this.isShow=false;
            this.menuForm={};
          });
        },
        searchTree(){
          this.$http.get("/menu/getTree").then((res)=>{
            if (res.data.success) {
              console.log(res)
              this.data[0].children=res.data.result;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        remove:function (node,data) {
          this.$http.get("/menu/del/"+data.id).then((res)=>{
            if (res.data.success) {
              console.log(res)
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.searchTree();
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        update:function (data) {
          this.$http.get("/menu/up/"+data.id).then((res)=>{
            if (res.data.success) {
              console.log(res)
              this.parentName=data.menuName
              this.menuForm=res.data.result;
              this.isShow=true;
            } else {
              this.$message.error(res.data.message);
            }
          });
        }

      }
      ,mounted() {
        this.searchTree();
      }
    }
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
